<template>
  <header class="header">
    <div class="container">
      <div class="header-content">
        <div class="logo">
          <img src="~/assets/images/img/B-01首页_slices/容器 1785.png" alt="轻图网" class="logo-img">
        </div>
        <div class="header-left">
          <nav class="nav">
            <a href="#" class="nav-link">分类向导</a>
            <a href="#" class="nav-link nav-link-with-badge">
              热门
              <span class="red-dot"></span>
            </a>
            <a href="#" class="nav-link">最新</a>
            <nuxt-link to="/" :class="['nav-link', { active: currentPath === '/' || (currentPath !== '/pingjia-gaigao' && currentPath !== '') }]">积分兑换</nuxt-link>
            <nuxt-link to="/pingjia-gaigao" :class="['nav-link', { active: currentPath === '/pingjia-gaigao' }]">平价改稿</nuxt-link>
          </nav>
          <div class="search-box-wrapper">
            <div class="search-box">
              <div class="search-category" @click.stop="toggleCategoryDropdown">
                <span>{{ selectedCategory.label }}</span>
                <svg class="dropdown-icon" width="12" height="8" viewBox="0 0 12 8" fill="none">
                  <path d="M1 1L6 6L11 1" stroke="#999" stroke-width="1.5"/>
                </svg>
              </div>
              <div class="search-input-wrapper">
                <input 
                  v-model="searchText" 
                  type="text" 
                  placeholder="请输入标题、关键词、作品编号、作者ID搜索"
                >
                <button v-if="searchText" class="clear-btn" @click="searchText = ''">
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                    <circle cx="7" cy="7" r="7" fill="#D0D0D0"/>
                    <path d="M4 4L10 10M10 4L4 10" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
                  </svg>
                </button>
              </div>
              <button class="search-btn" @click="handleSearch">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                  <circle cx="8" cy="8" r="6" stroke="white" stroke-width="2"/>
                  <path d="M12 12L17 17" stroke="white" stroke-width="2" stroke-linecap="round"/>
                </svg>
              </button>
            </div>
            <!-- 分类下拉菜单 - 移到 search-box 外部 -->
            <div v-if="showCategoryDropdown" class="category-dropdown-menu" @click.stop>
              <div 
                v-for="category in categoryOptions" 
                :key="category.id"
                :class="['category-option', { active: selectedCategory.id === category.id }]"
                @click.stop="selectCategory(category)"
              >
                {{ category.label }}
              </div>
            </div>
          </div>
        </div>
        <div class="header-right">
          <!-- 未登录状态 -->
          <template v-if="!isLoggedIn">
            <button class="btn-register" @click="openRegisterModal">注册</button>
            <button class="btn-login" @click="handleFakeLogin">登录</button>
          </template>
          <!-- 已登录状态 -->
          <template v-else>
            <div class="message-icon-wrapper" @click="handleMessageClick">
              <img :src="messageIcon" alt="消息" class="message-icon">
            </div>
            <UserMenu @logout="handleLogout" />
          </template>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup>
import { ref, defineEmits, onMounted, onUnmounted, computed } from 'vue'
import UserMenu from '@/src/components/UserMenu.vue'

const emit = defineEmits(['openRegister', 'openLogin'])

// 登录状态
const isLoggedIn = ref(false)

// 图标路径
const messageIcon = require('~/assets/images/img/F-2-平价改稿（静态页面）_slices/顶部导航_新消息.png')

// 获取当前路径
const currentPath = ref('')

const updatePath = () => {
  if (typeof window !== 'undefined') {
    currentPath.value = window.location.pathname
  }
}

onMounted(() => {
  updatePath()
  // 监听路由变化
  if (typeof window !== 'undefined') {
    window.addEventListener('popstate', updatePath)
    // 监听 Nuxt 路由变化
    if (window.$nuxt) {
      window.$nuxt.$router.afterEach(() => {
        updatePath()
      })
    }
  }
})

onUnmounted(() => {
  if (typeof window !== 'undefined') {
    window.removeEventListener('popstate', updatePath)
    // 清理定时器
    if (window.pathUpdateInterval) {
      clearInterval(window.pathUpdateInterval)
    }
  }
})

const searchText = ref('')

// 分类选项
const categoryOptions = ref([
  { id: 'all', label: '全部分类' },
  { id: 'poster', label: '海报' },
  { id: 'visual', label: '主视觉' },
  { id: 'dm', label: 'DM/画册/折页' },
  { id: 'ad', label: '广告设计' },
  { id: 'vi', label: 'VI/IP' },
  { id: 'element', label: '元素' },
  { id: 'photo', label: '摄影/图片' },
  { id: 'culture', label: '展陈/文化墙' },
  { id: '3d', label: '3D模型' },
  { id: 'ppt', label: 'PPT' },
  { id: 'other', label: '其它类型' }
])

const selectedCategory = ref(categoryOptions.value[0]) // 默认选中"全部分类"
const showCategoryDropdown = ref(false)

const toggleCategoryDropdown = (e) => {
  e.stopPropagation()
  showCategoryDropdown.value = !showCategoryDropdown.value
  console.log('切换下拉菜单:', showCategoryDropdown.value)
}

const selectCategory = (category) => {
  selectedCategory.value = category
  showCategoryDropdown.value = false
  console.log('选择分类:', category)
}

// 点击外部关闭下拉菜单
const handleClickOutside = (event) => {
  const categoryElement = event.target.closest('.search-category')
  const menuElement = event.target.closest('.category-dropdown-menu')
  if (!categoryElement && !menuElement && showCategoryDropdown.value) {
    showCategoryDropdown.value = false
  }
}

onMounted(() => {
  // 延迟添加事件监听，避免立即触发
  setTimeout(() => {
    document.addEventListener('click', handleClickOutside)
  }, 100)
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})

const handleSearch = () => {
  console.log('搜索:', searchText.value)
}

const openRegisterModal = () => {
  emit('openRegister')
}

const openLoginModal = () => {
  emit('openLogin')
}

// 假登录处理
const handleFakeLogin = () => {
  // 假登录：直接设置为已登录状态
  isLoggedIn.value = true
  // 也可以触发登录弹窗，这里选择直接登录
  // emit('openLogin')
}

// 消息图标点击
const handleMessageClick = () => {
  console.log('点击消息')
  // 这里可以添加消息相关的逻辑
}

// 退出登录
const handleLogout = () => {
  isLoggedIn.value = false
}
</script>

<style scoped>
.header {
  padding: 0 50px;
  background: white;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  gap: 20px;
  flex-wrap: nowrap;
}

.logo {
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-right: 30px;
}

.logo-img {
  height: 35px;
  width: auto;
  object-fit: contain;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 30px;
  flex: 1;
  min-width: 0;
}

.nav {
  display: flex;
  gap: 24px;
  flex-shrink: 0;
  white-space: nowrap;
}

.nav-link {
  text-decoration: none;
  color: #666;
  font-size: 14px;
  transition: color 0.3s;
  font-weight: 500;
  position: relative;
  white-space: nowrap;
}

.nav-link:hover,
.nav-link.active {
  color: #00D4AA;
}

.nav-link-with-badge {
  position: relative;
}

.red-dot {
  position: absolute;
  top: 0;
  right: -8px;
  width: 5px;
  height: 5px;
  background: #FC952F;
  border-radius: 50%;
}

.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.search-box-wrapper {
  position: relative;
  flex: 1;
  max-width: 600px;
  min-width: 400px;
}

.search-box {
  display: flex;
  align-items: stretch;
  background: #F5F5F5;
  border-radius: 8px;
  overflow: hidden;
  height: 35px;
  position: relative;
}

.search-category {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  background: #F5F5F5;
  color: #333;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  border-right: 1px solid #E0E0E0;
  position: relative;
  z-index: 1;
}

.dropdown-icon {
  flex-shrink: 0;
}

.category-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 8px 0;
  width: 130px;
  z-index: 2000;
}

.category-option {
  padding: 10px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  white-space: nowrap;
}

.category-option:hover {
  background: #F5F5F5;
}

.category-option.active {
  background: #F5F5F5;
  color: #19D8B6;
}

.search-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
  padding: 0 15px;
}

.search-input-wrapper input {
  border: none;
  background: none;
  outline: none;
  flex: 1;
  font-size: 12px;
  color: #333;
}

.search-input-wrapper input::placeholder {
  color: #999;
  font-size: 12px;
}

.clear-btn {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
}

.search-btn {
  border: none;
  background: #19D8B6;
  cursor: pointer;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}

.search-btn:hover {
  background: #00C099;
}

.btn-register,
.btn-login {
  padding: 6px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
  background: #00D4AA;
  color: white;
}

.btn-register:hover {
  background: #00C099;
}

.btn-login:hover {
  background: #00C099;
}

/* 已登录状态样式 */
.message-icon-wrapper {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: 8px;
}

.message-icon {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.notification-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background: #FC952F;
  border-radius: 50%;
  border: 2px solid white;
}

</style>

